<template>
  <div>
    <input type="text" v-model="ipt" /> <button @click="debounce(searchfn,2000)">点击</button>
    <button @click="resertfn">重置</button>
    <div v-for="(item, index) in arr" :key="index" @click="godetail(item)">
      <!-- 只有当图片出现在视口里才去加载图片，就叫图片懒加载 -->
      <van-image width="100" height="100" lazy-load :src="item.img" />
      <h3>{{ item.tit }}</h3>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {debounce} from "lodash"
import { Image as VanImage } from "vant";
import { Lazyload } from "vant";

Vue.use(Lazyload);

Vue.use(VanImage);
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      ipt: "",
      debounce:debounce
    };
  },
  mounted() {
    axios.get("/api/list").then((res) => {
      this.arr = res.data;
    });
  },
  methods: {
    godetail(ITEM) {
      this.$router.push({
        path: "/detail",
        query: {
          ITEM,
        },
      }); // 跳转路由
    },
    searchfn() {
      
     
      this.arr = this.arr.filter((item, index) => {
        return item.tit.includes(this.ipt);
      });
    },
    resertfn() {
      axios.get("/api/list").then((res) => {
        this.arr = res.data;
      });
      this.ipt = "";
    },
  },
};
</script>

<style>
</style>